﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="chapter.aspx.cs" Inherits="admin_chapter" %>


<asp:Content ContentPlaceHolderID="titleContent" runat="Server">章节</asp:Content>
<asp:Content ContentPlaceHolderID="headContent" runat="Server">
    <link href="../content/bootstrap/ext/treeview/bootstrap-treeview.css" rel="stylesheet" />
    <style type="text/css">
        #chapter-toolbar {
            display: none;
            position: absolute;
        }

            #chapter-toolbar img {
                padding-right: 8px;
                cursor: pointer;
            }
    </style>
</asp:Content>
<asp:Content ContentPlaceHolderID="mainContent" runat="Server">
    <h4><%=subjectName %>-大纲</h4>
    <div id="chapterview">
    </div>
    <div class="modal fade" id="modal_chapter_add" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content" style="margin-top: 30%;">
                <div class="modal-body" id="modal-body" style="padding-top: 0px; padding-bottom: 0px;">
                    <div class="row" style="padding: 5px;">
                        <div class="col-xs-4" style="padding-right: 0px;">
                            <input type="text" id="part" name="part" value="" placeholder="编号" class="form-control" onkeydown="$('#modal_chapter_add_save').popover('hide');" />
                        </div>
                        <div class="col-xs-5" style="padding-left: 5px;">
                            <input type="text" id="title" name="title" value="" placeholder="标题" class="form-control" />
                        </div>
                        <div class="col-xs-3">
                            <a id="modal_chapter_add_save" class="btn btn-success" href="javascript:void(0);" onclick="createChapter();">保存</a>
                            <a class="btn btn-warning" href="javascript:void(0);" onclick="$('#modal_chapter_add').modal('hide');">取消</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</asp:Content>
<asp:Content ContentPlaceHolderID="scriptContent" runat="Server">
    <script type="text/javascript">
        var subjectId = <%= subjectId%>;
    </script>
    <script src="../content/bootstrap/js/bootstrap.js" type="text/javascript"></script>
    <script src="../content/bootstrap/ext/treeview/bootstrap-treeview.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.focusNode = '';
        window.treeAction = 'add';
        window.focusChapter = '0';

        $(document).ready(function () {
            request("chapter.aspx", { data: "tree",sid : subjectId }, loadTree);
        });
        
        var loadTree = function(result){
            

            window.TreeNodes = result.data;

            $('#chapterview').treeview({
                color: "#428bca",
                expandIcon: 'glyphicon glyphicon-chevron-right',
                collapseIcon: 'glyphicon glyphicon-chevron-down',
                nodeIcon: 'glyphicon glyphicon-bookmark',
                enableLinks: true,
                data: result.data,
                onrender: function(){
                    var container = $('#chapterview');

                    container.children("ul").children("li").each(function(idx,el){
                        $(this).on("mouseover",onTreeNodeEnter);
                    });
                    container.children("ul").on("mouseout",function(e){ 
                        $('#chapter-toolbar').hide();
                    });

                    var toolbar = $("<span id='chapter-toolbar'>");
                    toolbar.html("<img id=\"toolbar-create\" src=\"../content/images/page_add_32.png\" alt=\"添加\" onmouseover=\"$('#chapter-toolbar').show();\" onclick=\"btnadd_click();\"/>" 
                                     +"<img id=\"toolbar-insert\" src=\"../content/images/page_add_32.png\" alt=\"插入\" onmouseover=\"$('#chapter-toolbar').show();\" onclick=\"btninsert_click();\"/>" 
                                    + "<img id=\"toolbar-del\" src=\"../content/images/page_del_32.png\" alt=\"删除\" onmouseover=\"$('#chapter-toolbar').show();\" onclick=\"delChapter();\"/>");
                    container.append(toolbar);
                }
            });

            $("#modal_chapter_add").modal('hide');
        };

        var btnadd_click = function(){
            $('#modal_chapter_add').modal();
            $('#part,#title').removeClass('input-validation-error').val('');
            window.treeAction='add';
            $('#part').val(window.focusNode + ".");
        };

        var btninsert_click = function(){
            $('#modal_chapter_add').modal();
            $('#part,#title').removeClass('input-validation-error').val('');
            window.treeAction='insert';
            if(window.focusNode.indexOf('.') > 0) $('#part').val(window.focusNode.substring(0,window.focusNode.lastIndexOf('.')) + '.');
        }

        var onTreeNodeEnter = function(e){
            var target = (e.target || e.srcElement);
            if(target.tagName.toLowerCase() != "li") return;
            
            var offset = $(target).offset();
            var toolbar = $("#chapter-toolbar");

            var title = $(target).children("a").text();
            var url = new UrlParser($(target).children("a").attr("href"));
            window.focusChapter = url.params["cid"];
            //$('#toolbar-insert').show();
            if(title != "<无>"){
                var idx = title.indexOf(']');
                if(idx > 0) {
                    window.focusNode = title.substring(1,idx);
                    //if(window.focusNode.indexOf('.') < 0) $('#toolbar-insert').hide();
                }
            }
            toolbar.css({
                top: offset.top - $('#chapterview').offset().top  + 44,
                left: $(target).width() - toolbar.width() + 40
            }).show();
        };

        var createChapter = function(){
            var part = $("#part").val();
            var title = $("#title").val();
            if(window.focusNode){
                if((window.treeAction == "add" && !(/\.[0-9]+/.test(part.slice(window.focusNode.length)))) 
                    || (window.treeAction == "insert" && window.focusNode.substring(0,window.focusNode.lastIndexOf(".")).length != part.substring(0,part.lastIndexOf(".")).length)){
                    $("#part").addClass("input-validation-error");
                    $("#modal_chapter_add_save").popover({
                        title:"验证",
                        content: "输入的编号不正确"
                    });
                    return;
                }
            }
            $("#part").removeClass("input-validation-error");//
            $("#modal_chapter_add_save").popover('hide');

            request(window.location.href,{'do': "save",part: part, title: title}, loadTree);
        };

        var delChapter = function(){
            request(window.location.href,{'do': "del",cid: window.focusChapter, part: window.focusNode}, loadTree);
        }
    </script>
</asp:Content>

